<template>
  <div class="viewTabs">
    <div class="viewTabs-left">
      <div class="icon-item" @click="scollLeft">
        <el-icon :size="20">
          <DArrowLeft />
        </el-icon>
      </div>
      <!-- 标签区域 -->
      <div class="tabs" ref="tabsRef">
        <el-tag
          v-for="route in appStore.getOpenRouters()"
          :key="route.meta.key"
          class="mx-1"
          :class="
            appStore.getCurrentRouter().path === route.path ? 'effect' : ''
          "
          closable
          @close="closeTags(route)"
          @click="clickTag(route)"
        >
          {{ $t(route.meta.i18n) }}
        </el-tag>
      </div>
      <div class="icon-item" @click="scollRight">
        <el-icon :size="20">
          <DArrowRight />
        </el-icon>
      </div>
    </div>
    <!-- 右边两个按钮，刷新按钮和设置按钮 -->
    <div class="viewTabs-right">
      <div class="icon-item" @click="regreshPage">
        <el-icon :size="20"><RefreshRight /></el-icon>
      </div>
      <el-dropdown trigger="click" popper-class="userOption">
        <div class="icon-item">
          <el-icon :size="20"><Setting /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="closeOthersTags">{{
              $t("nav.closeOthersMenu")
            }}</el-dropdown-item>
            <el-dropdown-item @click="closeLeftTags">{{
              $t("nav.closeLeftMenu")
            }}</el-dropdown-item>
            <el-dropdown-item @click="closeRightTags">{{
              $t("nav.closeRightMenu")
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import {
  RefreshRight,
  Setting,
  DArrowLeft,
  DArrowRight,
} from "@element-plus/icons-vue";
import { useAppStore } from "@/stores/appStore";
import router from "@/router";
const appStore = useAppStore();
const { replace } = useRouter();
const tabsRef = ref(null);

function scollLeft() {
  console.log(tabsRef);
  let i = 1;
  const scollLeftTimer = setInterval(() => {
    tabsRef.value.scrollLeft = tabsRef.value.scrollLeft - 10;
    i++;
    if (i >= 10) {
      clearInterval(scollLeftTimer);
    }
  }, 10);
}

function scollRight() {
  let i = 1;
  const scollLeftTimer = setInterval(() => {
    tabsRef.value.scrollLeft = tabsRef.value.scrollLeft + 10;
    i++;
    if (i >= 10) {
      clearInterval(scollLeftTimer);
    }
  }, 10);
}

function closeTags(route) {
  appStore.removeOpenRouterItem(route);
}

function clickTag(route) {
  router.push(route.path);
}

// 点击了刷新按钮
function regreshPage() {
  const query = appStore.getCurrentRouter().query;
  replace({
    path: "/redirect" + appStore.getCurrentRouter().path,
    query: query,
  });
}

function closeOthersTags() {
  appStore.closeOthersTags();
}

function closeLeftTags() {
  appStore.closeLeftTags();
}

function closeRightTags() {
  appStore.closeRightTags();
}
</script>
<style lang="scss" scoped>
.viewTabs {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  .viewTabs-left {
    flex-grow: 1;
    width: 0;
    height: 100%;
    display: flex;
    .tabs {
      flex-grow: 1;
      width: 0;
      overflow: hidden;
      height: 100%;
      padding: 1px;
      display: flex;
      align-items: center;
      .el-tag {
        height: 100%;
        cursor: pointer;
        color: #fff;
        @include second_bg_color("second_bg_color");
        @include border_color("border_color");
        :deep(.el-icon) {
          color: #fff;
        }
        &:hover {
          @include bg_color("bg_color");
          color: #fff;
          :deep(.el-icon) {
            color: #fff;
            &:hover {
              background: #ecf5ffa1;
            }
          }
        }
        &.effect {
          @include bg_color("bg_color");
        }
      }
      .el-tag + .el-tag {
        margin-left: 5px;
      }
    }
  }
  .viewTabs-right {
    height: 100%;
    display: flex;
  }
  .icon-item {
    height: 100%;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px !important;
    color: rgba(0, 0, 0, 0.5);
    border: 1px solid #e5e7eb;
    cursor: pointer;
    &:hover {
      color: rgba(0, 0, 0, 1);
    }
  }
}
</style>
